<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


    <link href="/static/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet">
    <script src="/static/bootstrap3-editable/js/bootstrap-editable.js"></script>

    <![endif]-->
</head>
<body>
<div align="center"><h1>{{session["nickname"]}}</h1></div>
<div align="center">
    <table class="table table-bordered" style="word-break:break-all; width: 1280px">
        <thead>
        <th>消息类型</th>
        <th>时间</th>
        <th>用户</th>

        <th>消息</th>
        </thead>
        <tbody>
        {% for line in data %}
        <tr>
            <td width="100">{{MESSGAE_TYPE_CHOICES_DISPALY_DICT[line["messageType"]]}}
            </td>
            <td width="130">{{ line["msgCreateTime"] }}</td>
            <td width="130">
                <img width="25" src='{{ line["head_url"] }}'>
                {{ line["user_name"] or line["sender_wxid"] }}
                <!-- -{{ line["sender_wxid"] }}-->
            </td>


            <td>
                {% if line["messageType"] == 1 %}
                <!-- 普通文本	 -->

                <a href="#" class="msgcontent" data-type="text" data-pk="{{ line['mesLocalID'] }}"
                   data-url="/msg/{{ mid }}/update-text" data-title="修改文本"> {{ line["msgContent"] }}</a>


                {% elif line["messageType"] == 3 %}
                <!-- 图片 -->
                {% if line["file_path"] %}
                <img src='/{{ line["file_path"] }}' style="width: 200px;"
                     onclick=showBigImg('/{{ line["file_path"] }}')>

                {% else %}
                <pre style="width: 800px; max-height: 300px">该图片无法获取-{{ line["mesSvrID"] }}-{{ line["name_md5"] }}: {{ line["msgContent"] }}</pre>
                {% endif %}

                {% elif line["messageType"] == 43 %}
                <!-- 视频 -->
                <div>
                    {% if line["file_path"] %}
                    <iframe class="embed-responsive-item" style="width: 350px; height: 350px"
                            src='/{{ line["file_path"] }}'></iframe>
                    {% else %}
                    <pre style="width: 800px; max-height: 300px">该视频无法获取: {{ line["msgContent"] }}</pre>
                    {% endif %}
                </div>
                {% elif line["messageType"] == 47 %}
                <!-- 表情包 -->
                {% if line["emoji_url"] %}
                <img src='{{ line["emoji_url"] }}' style="width: 200px;">
                {% else %}
                <pre style="width: 800px; max-height: 300px">该表情包无法获取: {{ line["msgContent"] }}</pre>
                {% endif %}

                {% else %}
                <pre style="width: 800px; max-height: 300px"> {{ line["msgContent"] }}</pre>
                {% endif %}
            </td>

            <!--<td> {{ line["msgSource"] }}</td>-->

        </tr>
        {% endfor %}


        </tbody>
    </table>
</div>

<!--放大图的imgModal-->
<div class="modal fade bs-example-modal-lg text-center" id="imgModal" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" style="display: inline-block; width: auto;">
        <div class="modal-content">
            <img id="imgInModalID" src="" style="max-height: 600px; max-width: 960px;">
        </div>
    </div>
</div>

</body>
<script>
    function showBigImg(img_url) {
        $('#imgInModalID').attr('src', img_url);
        $('#imgModal').modal('show');

    }

    // $.fn.editable.defaults.mode = 'inline';

    $('.msgcontent').editable({});

</script>
</html>